<template>
	<comRoot>
		<template #page>
			
			<image v-if="commonConfigs && commonConfigs.domainFrontFileLink"
				:src="`${commonConfigs.domainFrontFileLink}/files/images/page-bg.png`" class="bg" />
				
			<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" 
				:src="`${commonConfigs.domainFrontFileLink}/files/images/rebates/week-bg.png`" 
				style="width: 100%;height: 556rpx;"
				class="bg" />
			
			<view class="week-rebate-page relative">
				
				<comDetailNavigateBack title="每周奖励"/>
				<view class="week-rebate-content relative" :style="{height: 'calc(100vh - ' + commonNavHeight + ')',}">
					<!-- 内容 -->
					<view class="week-rebate-box margin-auto relative flex-direction-column flex-all-center">
						
						<image class="bg" v-if="commonConfigs && commonConfigs.domainFrontFileLink"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/rebates/day-content-bg.png`" mode=""></image>
						
						<view class="week-time flex-align-items-center absolute">
							<!-- <image class="bg" v-if="commonConfigs && commonConfigs.domainFrontFileLink"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/rebates/day-time-bg.png`" mode=""></image> -->
							<view class="relative">{{ countdownTxt }}：</view>
							<view class="relative" style="font-size: 28rpx;color: #FFF;">{{ countdownTimer }}</view>
						</view>
						
						<view class="week-rebate-info">
								
							<view class="week-rebate-info-title flex-all-center absolute">
								<image class="bg" v-if="commonConfigs && commonConfigs.domainFrontFileLink"
									:src="`${commonConfigs.domainFrontFileLink}/files/images/rebates/info-title-bg.png`" mode=""></image>
								<view class="relative">活动奖励</view>
							</view>
							
							<view class="week-rebate-info-item flex-align-items-center relative flex-justify-content-between" v-for="(item, index) in weekRebateInfo.rows" v-if="weekRebateInfo && weekRebateInfo.rows && weekRebateInfo.rows.length" :key="index" @click="gooDetailPage(item)">
								<image class="bg" v-if="commonConfigs && commonConfigs.domainFrontFileLink && item.join"
									:src="`${commonConfigs.domainFrontFileLink}/files/images/rebates/day-item-bg.png`" mode=""></image>
								
								<view class="info-item-order absolute flex-all-center">
									<image v-if="item.join" class="bg"
										:src="`${commonConfigs.domainFrontFileLink}/files/images/rebates/current-day-sort-bg.png`" 
										mode=""></image>
									<image v-else class="bg"
										:src="`${commonConfigs.domainFrontFileLink}/files/images/rebates/day-sort-bg.png`" 
										mode=""></image>
									<view class="relative" :style="{
										color: item.join ? '#FFFFFF' : '#FFFFFF'
									}">
										{{ index + 1 }}
									</view>
								</view>
								
								<view class="info-item-title flex-align-items-center absolute">
									<text>{{item.range_title}}</text> 
									<text style="font-size: 24rpx;">（机能）</text>
								</view>
								
								<view class="info-item-users flex-align-items-center absolute" :class="item.join===1 ? 'item-users-active' : ''">
									<image 
									style="margin-right: 8rpx;width: 32rpx;height: 26rpx;"
									:src="`${commonConfigs.domainFrontFileLink}/files/images/rebates/week-people.png`" mode=""></image>

									<text>{{item.user_count}}人</text>
								</view>
								
								<image class="info-item-goto-icon absolute" :src="`${commonConfigs.domainFrontFileLink}/files/images/rebates/week-item-arrow.png`" mode=""></image>
							</view>
						</view>
					</view>
					
					<!-- 消费金额 -->
					<view class="cash-content flex-justify-content-between margin-auto">
						<view class="cash-item relative flex-direction-column flex-all-center">
							<image class="bg"
								v-if="commonConfigs && commonConfigs.domainFrontFileLink" 
								:src="`${commonConfigs.domainFrontFileLink}/files/images/rebates/day-bg-left.png`" mode=""></image>
							<view class="cash-item-title relative">本周消费：</view>
							<view class="cash-item-money relative font-hanserif-bold"
							>{{weekRebateInfo.cashToday}}</view>
						</view>
						<view class="cash-item relative flex-direction-column flex-all-center">
							<image class="bg"
								v-if="commonConfigs && commonConfigs.domainFrontFileLink" 
								:src="`${commonConfigs.domainFrontFileLink}/files/images/rebates/day-bg-right.png`" mode=""></image>
							<view class="cash-item-title relative">上周消费：</view>
							<view class="cash-item-money relative font-hanserif-bold">{{weekRebateInfo.cashYesterday}}</view>
						</view>
					</view>
					
					<view class="cash-rule-content margin-auto">
						<view class="cash-rule-name relative margin-auto">
							<image class="absolute-center rules-line" :src="`${commonConfigs.domainFrontFileLink}/files/images/rebates/week-line.png`" mode=""></image>
						</view>
						<view class="cash-rule-txt" v-html="weekRebateInfo.remarks">
						</view>
					</view>
				</view>
			</view>
		</template>
	</comRoot>
</template>

<script>
	import {
		getWelfareHouseHomeApi
	} from '@/setupproject/INTERFACE.js';
	
	import {
		setDayTimeFunFormat
	} from '@/setupproject/TOOLS_FUN';
	
	export default {
		name: 'weekRebatePage',
		data() {
			return {
				timer: null, // 定时器
				countdownTimer: '-- : -- : --', // 倒计时
				countdownTxt: '活动倒计时',
				weekRebateInfo: {},
			}
		},
		computed: {
			commonNavHeight() {
				return this.$store.getters.commonNavHeight + 'px';
			},
			commonConfigs() {
				return this.$store.getters.commonConfigs || {};
			},
		},
		onLoad() {
			this.getDataListFun();
		},
		onUnload() {
			if(this.timer) {  
				clearInterval(this.timer);  
				this.timer = null;  
			} 
		},
		methods: {
			async getDataListFun() {
				const {
					data,
					code,
				} = await getWelfareHouseHomeApi();
				
				if (code !== 200 && data) return;
				
				this.weekRebateInfo = data;

				if(data.time_end > new Date().getTime()/1000) {
					this.timer = setInterval(() => {
						let currentTime = data.time_end - new Date().getTime()/1000;
						this.countdownTimer = setDayTimeFunFormat(currentTime);
						if(this.countdownTimer === '已结束') {
							clearInterval(this.timer);
							this.getDataListFun();
						}
					}, 1000)
				} else if(data.open_time) {
					let currentTime = new Date().getTime();
					
					let currentDay = new Date();
					currentDay.setHours(0, 0, 0, 0);
					
					let currentDate = currentDay.getTime();
					
					if((currentTime - currentDate)/1000 < data.open_time * 60) {
						this.countdownTxt = '开奖倒计时';
						this.timer = setInterval(() => {
							let phaseTime = data.open_time * 60 - (new Date().getTime() - currentDate)/1000; 
							let h = parseInt(phaseTime / (60 * 60) % 24);
							h = h < 10 ? "0" + h : h
							let m = parseInt(phaseTime / 60 % 60);
							m = m < 10 ? "0" + m : m
							let s = parseInt(phaseTime % 60);
							s = s < 10 ? "0" + s : s
							this.countdownTimer = h + ':' + m + ':' + s;
							
							if(h === '00' && m === '00' && s === '00') {
								clearInterval(this.timer);
								this.getDataListFun();
							}
						}, 1000)
					}
				}
				
			},
			
			async gooDetailPage(item) {
				uni.navigateTo({
					url: `/secondary/joinHousePage/joinHousePage?id=${item.id}&type=${item.type}`
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.week-rebate-page{
		.week-rebate-content{
			padding-bottom: 180rpx;
			overflow-y: auto;

			.week-rebate-box{
				font-size: 26rpx;
				color: #fff;
				width: 710rpx;
				height: 669rpx;
				margin-top: 240rpx;
				margin-bottom: 16rpx;
				
				.week-rebate-info-title {
					width: 384rpx;
					height: 72rpx;
					font-size: 40rpx;
					color: #001762;
					left: 0;
					right: 0;
					top: -30rpx;
					margin: auto;
				}
				
				.week-time {
					left: 0rpx;
					top: -140rpx;
					font-size: 28rpx;
					width: 403rpx;
					height: 56rpx;
					line-height: 56rpx;
					color: #FFF;
					padding-left: 35rpx;
					.week-time-icon {
						margin-right: 10rpx;
						width: 22rpx;
						height: 26rpx;
					}
				}
				
				.week-rebate-info {
					border-radius: 20rpx;
					// left: 0rpx;
					// top: 42rpx;
					// padding: 20rpx 3rpx 0;
					width: 649rpx;
					// height: 100%;
					background: rgba(255, 255, 255, 0.2);
					
					.week-rebate-info-item {
						width: 100%;
						height: 100rpx;
						padding: 0 18rpx;
						color: #FFFFFF;
						font-size: 32rpx;
						
						&::after {
							width: 100%;
							height: 2rpx;
							background: #AAB3C5;
							content: '';
							position: absolute;
							left: 0;
							right: 0;
							bottom: 0;
							margin: auto;
						}
						
						&:last-child {
							margin-bottom: 0;
						}
						.info-item-order {
							margin-right: 10rpx;
							width: 52rpx;
							height: 50rpx;
						}
						.info-item-title {
							left: 104rpx;
							height: 100%;
							font-size: 28rpx;
							color: #FFFFFF;
							white-space: nowrap;
						}
						.info-item-users {
							white-space: nowrap;
							right: 38rpx;
							height: 100%;
							font-size: 28rpx;
							color: #E5E5E5;
							&.item-users-active {
								color: #FFFFFF;
							}
						}
						.info-item-goto-icon {
							width: 13rpx;
							height: 27rpx;
							right: 18rpx;
							top: 0;
							bottom: 0;
							margin: auto;
						}
					}
				}
			}
			.cash-content {
				width: 710rpx;
				left: 0;
				right: 0;
				margin: auto;
				.cash-item {
					width: 341rpx;
					height: 105rpx;
					
					.cash-item-title {
						font-size: 32rpx;
						color: #2D3489;
					}
					.cash-item-money {
						color: #63FFF7;
						font-size: 28rpx;
					}
				}
			}
			
			.cash-rule-content{
				font-size: 30rpx;
				color: #666666;
				margin-top: 40rpx;
				width: 686rpx;
				text-align: justify;
				
				.cash-rule-name {
					width: 481rpx;
					height: 36rpx;
					text-align: center;
					font-size: 36rpx;
					color: #fff;
					.rules-line {
						width: 192rpx;
						height: 48rpx;
					}
				}
				.cash-rule-txt {
					margin-top: 24rpx;
				}
			}
		}
	}
</style>